<template>
	<!-- 客户管理 -->
	<view class="wp">
		<view class="nav_bar">
			<text class="item-bar" :class="{'active':nabIdx===0}" @click="navTap(0)">今日({{num.curnum}})</text>
			<text class="item-bar" :class="{'active':nabIdx===1}" @click="navTap(1)">昨日({{num.yeanum}})</text>
			<text class="item-bar" :class="{'active':nabIdx===3}" @click="navTap(3)">筛选 <text class="yticon icon-you"></text> </text>
		</view>
		<view class="over_view">
			当前合计:{{info.cutp}}人，消费{{info.saleprice}}元。实付{{info.price}}元
		</view>
		<view class="list">
			<view class="list_item" v-for="(item,idx) in list" :key="idx">
				<image :src="item.avatar" mode=""></image>
				<view class="right">
					<view class="title">
							<text class="name">{{item.nickname}}</text>
							<text class="label" v-if="item.level==1">VIP</text>
							<text class="label label1" v-else>会员</text>
						<text>最近支付{{item.paytime}}</text>
					</view>
					<view class="phone">
						<text>{{item.mobile}}</text>
						<view class="">
							<text>上次实付</text>
							<text class="color_money">{{item.price}}</text>
						</view>
					</view>
					<view class="consume">
						<view>
							<text>支付</text>
							<text class="color_num">{{item.cut}}</text>
							<text>次,扣除额度</text>
							<text class="color_num">{{item.goodsprice}}</text>
							<text>元</text>
						</view>
						<view class="">
							<text class="color_num">{{item.stime}}</text>
							<text>天未进店</text>
						</view>
					</view>
				</view>
			</view>
			<view class="empty">
				<image v-if="isloading" src="../../static/business/loading.gif" mode=""></image>
				<text v-if="!ismore">到底了~</text>
			</view>
		</view>


		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<uni-forms :modelValue="formData" label-width="120px" label-position="top">
				<uni-forms-item label="开始日期">
					<view class="data_time" @click="openPicker('begintime')">
						<text v-if="formData.begintime">{{formData.begintime}}</text>
						<text v-else>选择日期</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="截止日期">
					<view class="data_time" @click="openPicker('endtime')">
						<text v-if="formData.endtime">{{formData.endtime}}</text>
						<text v-else>选择日期</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="距今日天数">
					<uni-easyinput type="number" v-model="formData.daynum" :clearable="false" placeholder="距今日天数" />
				</uni-forms-item>
				<uni-forms-item label="实付金额区间">
					<view class="money">
						<uni-easyinput type="number" v-model="formData.beginmoney" :clearable="false"
							placeholder="最低金额" /><text>—</text><uni-easyinput type="number" v-model="formData.endmoney"
							:clearable="false" placeholder="最高金额" />
					</view>
				</uni-forms-item>
				<view class="screen_submit">
					<button @click="screenSubmit">确定筛选</button>
				</view>
			</uni-forms>
		</uni-drawer>
		<simple-datetime-picker ref="myPicker" :startYear="2023" :isd="true" :endYear="endYear"
			@submit="handleSubmit"></simple-datetime-picker>
	</view>
</template>

<script>
	import SimpleDateTimePicker from '@/components/simple-datetime-picker/simple-datetime-picker.vue'
	export default {
		components: {
			SimpleDateTimePicker
		},
		data() {
			let date = new Date(),
				year = date.getFullYear();
			return {
				nabIdx: 0,
				endYear: year,
				setDataTime: '',
				formData: {
					begintime: '',
					endtime: '',
					daynum: '',
					beginmoney: '',
					endmoney: '',
				},
				setformData: {
					begintime: '',
					endtime: '',
					daynum: '',
					beginmoney: '',
					endmoney: '',
				},
				info: {
					cut: "0",
					cutp: "0",
					price: 0,
					saleprice: 0,
				},
				num: {
					curnum: "0",
					yeanum: "0"
				},
				page: 0,
				list: [],
				isloading: false,
				ismore: true,
			}
		},
		onLoad() {
			this.getInfo();
			this.getNum();
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			getInfo() {
				let obj = {
					...this.formData,
					type: this.nabIdx
				}
				this.$axios('customer/main', 'POST', 'member', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getNum() {
				this.$axios('customer/headerInfo', 'POST', 'member').then(res => {
					if (res.data.code == 200) {
						this.num = res.data.data;
					}
				})
			},
			getList() {
				this.page++;
				let obj = {
					...this.formData,
					type: this.nabIdx,
					page: this.page
				}
				this.isloading = true;
				this.ismore = true;
				this.$axios('customer/lists', 'POST', 'member', obj).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						this.list = [...this.list, ...res.data.data];
						this.ismore = res.data.data.length > 0;
					}
				})
			},
			screenSubmit() {
				if (this.formData.beginmoney > this.formData.endmoney) {
					this.$api.msg('请正确输入实付金额区间');
					return;
				}
				this.$refs.showRight.close();
				this.page = 0;
				this.list = [];
				this.getList();
			},
			handleSubmit(e) {
				if (!this.setDataTime) return;
				this.formData[this.setDataTime] = `${e.year}-${e.month}-${e.day}`;
			},
			openPicker(v) {
				this.setDataTime = v;
				this.$refs.myPicker.show();
			},
			navTap(v) {
				if (v === 3) {
					this.nabIdx = v;
					this.$refs.showRight.open();
					return;
				}
				if (v === this.nabIdx) return;
				this.nabIdx = v;
				this.formData = {
					...this.setformData
				}
				this.page = 0;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.wp {
		overflow: hidden;
		padding: 80upx 0 100upx;
	}

	.nav_bar {
		background: #fff;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 100;

		.item-bar {
			flex: 1;
			line-height: 80upx;
			letter-spacing: 2px;
			text-align: center;
			position: relative;
			font-weight: bold;
			font-size: 28upx;

			.icon-you {
				display: inline-block;
				transform: rotateZ(90deg);
			}
		}

		.active::after {
			border-bottom: 2px $bg-color solid;
			content: '';
			position: absolute;
			bottom: 8upx;
			left: 50%;
			transform: translateX(-50%);
			width: 40upx;
		}
	}

	.over_view {
		background: #fff;
		font-weight: bold;
		letter-spacing: 1px;
		margin: 20upx 0;
		padding: 20upx;
	}

	.list {
		.list_item {
			background: #fff;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			margin-bottom: 20upx;
			padding: 20upx;

			image {
				border-radius: 20upx;
				height: 120upx;
				width: 120upx;
			}

			.right {
				flex: 1;
				padding-left: 20upx;
				letter-spacing: 1px;

				.title,
				.phone,
				.consume {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 28upx;
						font-weight: bold;
						overflow:hidden;
						white-space:nowrap;
						// text-overflow:ellipsis;
						width:72px;
					}

					.label {
						font-size: 25upx;
						background: #000;
						border-radius: 8upx;
						color: #f3dd91;
						padding: 2upx 8upx;
						margin: 0upx;
					}

					.label1 {
						background: #f3dd91;
						color: #927419;
					}
				}

				.phone {
					padding: 10upx 0;

					.color_money {
						color: $bg-color;
						font-weight: bold;
					}
				}

				.consume {
					.color_num {
						color: #8405dc;
						font-weight: bold;	
					}
				}
			}
		}
	}

	.uni-forms {
		padding: 0 20upx;
	}

	.uni-forms .uni-forms-item__label {
		padding-bottom: 0 !important;
	}

	.uni-forms .uni-forms-item {
		margin-bottom: 10px;
	}

	.data_time {
		border: 1px solid #e5e5e5;
		border-radius: 4px;
		color: #666;
		font-size: 14px;
		height: 35px;
		line-height: 35px;
		padding: 0 10px;
	}

	.money {
		display: flex;
		align-items: center;

		text {
			color: #666;
			margin: 0 20upx;
		}
	}

	.screen_submit {
		padding-top: 50upx;
		text-align: center;

		button {
			background: $bg-color;
			color: #fff;
			line-height: 90upx;
			height: 90upx;
			font-size: 34upx;
			letter-spacing: 1px;
		}
	}

	.empty {
		image {
			height: 60upx;
			width: 60upx;
		}

		text-align: center;
		color: #4399fc;
	}
</style>